<template>
	<div class="rank">
		<div class="banner-box">
			<div class="rank-banner">	
			</div>
		</div>
        <div class="rank-content card">
        	<div class="rank-content-item line">
				<div class="item-list">
					<div class="list-total">	
					</div>
					<p class="tips">注：按总得分排名</p>
					<div class="item-list-content">
						<div class="rank-list-item" v-for="item in ranklist.total" :key="item.rank">
							<div style="color: #2e8afc;" :class="['item-num',item.rank <= 3?'num-bold':'num-unbold']">{{item.rank}}</div>
							<img :src="item.img" alt="avator" class="item-img">
							<div class="item-wrapper">
								 <a href="#/rank">{{item.name}}<i class="iconfont icon-xueshimao" v-show="item.student"></i></a> 
								<div class="item-score">
									累计得分 {{item.score}}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
        	<div class="rank-content-item line">
				<div class="item-list">
					<div class="list-review">	
					</div>
					<p class="tips">注：按评价他人得分排名</p>
					<div class="item-list-content">
						<div class="rank-list-item" v-for="item in ranklist.review" :key="item.rank">
							<div style="color: #39c911;" :class="['item-num',item.rank <= 3?'num-bold':'num-unbold']">{{item.rank}}</div>
							<img :src="item.img" alt="avator" class="item-img">
							<div class="item-wrapper">
								 <a href="#/rank">{{item.name}}<i class="iconfont icon-xueshimao" v-show="item.student"></i></a> 
								<div class="item-score">
									累计得分 {{item.score}}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
        	<div class="rank-content-item line">
				<div class="item-list">
					<div class="list-share">	
					</div>
					<p class="tips">注：按笔记发表个数排名</p>
					<div class="item-list-content">
						<div class="rank-list-item" v-for="item in ranklist.share" :key="item.rank">
							<div style="color: #ff9219;" :class="['item-num',item.rank <= 3?'num-bold':'num-unbold']">{{item.rank}}</div>
							<img :src="item.img" alt="avator" class="item-img">
							<div class="item-wrapper">
								 <a href="#/rank">{{item.name}}<i class="iconfont icon-xueshimao" v-show="item.student"></i></a> 
								<div class="item-score">
									发表数量 {{item.score}}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
        	<div class="rank-content-item">
				<div class="item-list">
					<div class="list-work">
					</div>
					<p class="tips">注：按作业提交得分排名</p>
					<div class="item-list-content">
						<div class="rank-list-item" v-for="item in ranklist.work" :key="item.rank">
							<div style="color: #7f67fd;" :class="['item-num',item.rank <= 3?'num-bold':'num-unbold']">{{item.rank}}</div>
							<img :src="item.img" alt="avator" class="item-img">
							<div class="item-wrapper">
								 <a href="#/rank">{{item.name}}<i class="iconfont icon-xueshimao" v-show="item.student"></i></a> 
								<div class="item-score">
									累计得分 {{item.score}}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
        </div>
	</div>
</template>

<script>
	import rank from './rankList'
	export default {
		data(){
			return {
				ranklist:{
					total:rank.rankList.totalList,
					review:rank.rankList.reviewList,
					share:rank.rankList.shareList,
					work:rank.rankList.workList
				}
			}
		},
		created(){
			console.log(this.ranklist)
		}
	}
</script>

<style scoped="scoped">
	.rank{
		max-width: 60.25rem;
		margin: 0 auto;
		height: auto;
	}
	.banner-box{
		      position: relative;
		      width: 100%;
		      padding-top: 35%;
		      border: 1px solid #ececec;
		      margin: 20px auto;
	}
	.rank-banner{
		    position: absolute;
		    top: 0;
		    right: 0;
		    bottom: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		    background: url(http://ife.baidu.com/2018/asset/common/img/rankBanner_8aab391.jpg) center center no-repeat;
		    -webkit-background-size: cover;
		    background-size: cover;
			
	}
	.rank-content{
		    background-color: #fff;
		    width: 100%;
		    margin: 20px auto;
			box-sizing: border-box;
	}
	.rank-content-item{
		    display: inline-block;
			height: 100%;
		    padding: 20px 12px;
		    width: 25%;
			box-sizing: border-box;
	}
	.line{
	border-right: 1px solid #f1f1f1;
	}
	.card{
		    margin-bottom: 2.375rem;
		    background: #fff;
		    -webkit-box-shadow: 0 1px 4px 1px rgba(0,0,0,.08);
		    box-shadow: 0 1px 4px 1px rgba(0,0,0,.08);
		    border-radius: 0;
		    border: none;
	}
	.rank-content-item .item-list{
		    box-sizing: border-box;
			
	}
	.rank-content-item .item-list .list-total{
		        width: 60%;
		        padding-top: 19%;
		        margin: 0 auto;
				background-image:url(http://ife.baidu.com/2018/asset/common/img/totalRank_259b6b2.png);
				background-size: 100% 100%;
	}
	.rank-content-item .item-list .list-review{
		        width: 60%;
		        padding-top: 19%;
		        margin: 0 auto;
				background-image:url(http://ife.baidu.com/2018/asset/common/img/reviewRank_e590aae.png);
				background-size: 100% 100%;
	}
	.rank-content-item .item-list .list-share{
		        width: 60%;
		        padding-top: 19%;
		        margin: 0 auto;
				background-image:url(http://ife.baidu.com/2018/asset/common/img/noteRank_d6a5616.png);
				background-size: 100% 100%;
	}
	.rank-content-item .item-list .list-work{
		        width: 60%;
		        padding-top: 19%;
		        margin: 0 auto;
				background-image:url(http://ife.baidu.com/2018/asset/common/img/workRank_d036d73.png);
				background-size: 100% 100%;
	}
	.item-list .tips{
		color: #e2e2e2;
		    font-size: 12px;
		    margin-top: 15px;
		    margin-bottom: 0;
		    text-align: center;
	}
	.item-list .item-list-content{
		    box-sizing: border-box;
	}
	.rank-list-item{
		box-sizing: border-box;
		height: 70px;
		border-bottom: 1px dashed #e2e2e2;
	}
	.item-num{
			margin-right: 5%;
			line-height: 70px;
			width: 10%;
			text-align: center;
			float: left;
	}
	.num-bold{
		    font-weight: 700;
		    font-size: 20px;
	}
	.num-unbold{
		font-weight: 400;
		font-size: 18px;
	}
	.item-img{
		vertical-align: middle;
		width: 2.5rem;
		    height: 2.5rem;
		    border-radius: 1.25rem;
		    line-height: 70px;
		    margin-top: 15px;
			float: left;
	}
	.item-wrapper{
		    position: relative;
		    margin-top: 10px;
		    margin-left: .4375rem;
		    width: 45%;
			float: right;
			height: 50px;
			line-height: 20px;
			margin-right: 35px;
			font-size: 14px;
			
	}
	.item-wrapper a{
		display: block;
		    color: #343434;
		    font-size: 14px;
		    margin-top: 10px;
		    overflow: hidden;
		    text-overflow: ellipsis;
		    white-space: nowrap;
		    width: 100%;
	}
	.item-wrapper a:hover{
		    color: #38ba72;
	}
	.item-wrapper .item-score{
		position: absolute;
		left: 0;
		bottom: 5px;
		font-size: 12px;
		height: 20px;
		line-height: 20px;
		color: #aeaeae;
	}
	.item-wrapper .iconfont{
		font-size: 14px;
		color: #aeaeae;
	}
</style>
